import React from 'react';
import './HotspotTab.css'

interface Festival {
  name: string;
  date: string;
  tip: string;
}
interface HotspotTabsProps {
  festivals: Festival[];
  activeIdx: number;
  setActiveIdx: (idx: number) => void;
}
const HotspotTabs: React.FC<HotspotTabsProps> = ({ festivals, activeIdx, setActiveIdx }) => (
  <div className="hotspot-tabs">
    {festivals.map((f, idx) => (
      <div
        key={f.name}
        className={`hotspot-tab${activeIdx === idx ? ' active' : ''}`}
        onMouseEnter={() => setActiveIdx(idx)}
        onClick={() => setActiveIdx(idx)}
      >
        <div className="tab-name">{f.name}</div>
        <div className="tab-date">{f.date}</div>
        <div className={`tab-tip${activeIdx === idx ? ' active' : ''}`}>{f.tip}</div>
      </div>
    ))}
  </div>
);

export default HotspotTabs;
